<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

    <div class="box">
      <el-form ref="form" style="text-align: left;float: left;margin-top: 1vh;" :inline="true" class="demo-form-inline" label-position="right" :model="form" label-width="150px">
        <el-form-item label="氢⽓负荷数据类型：">
          <el-radio-group v-model="dataType">
            <el-radio label="typicalDay">典型日</el-radio>
            <el-radio label="typicalSeasonalDays">季节典型日</el-radio>
            <el-radio label="annualData">全年数据</el-radio>
          </el-radio-group>
        </el-form-item>
    
        <el-form-item label="负荷类型：">
          <el-radio-group v-model="loadType">
            <el-radio label="hydrogenLoad">氢负荷</el-radio>
            <el-radio label="electricLoad">电负荷</el-radio>
            <el-radio label="heatLoad">热负荷</el-radio>
            <el-radio label="coolingLoad">冷负荷</el-radio>
          </el-radio-group>
        </el-form-item>
      
      </el-form>

            
      <div style="margin-top: 0.8vh;text-align: right;margin-right: 1vh;">
        <el-button type="primary" @click="uploadData()" >
          <span class="button-text">上传</span>
        </el-button>
      </div>

    </div>

    <div style="top:18vh;" class="box">
      <el-form ref="form" style="text-align: left;float: left;margin-top: 0.65vh;" :inline="true" class="demo-form-inline" label-position="right" :model="form" label-width="150px">
        <el-form-item label="">
          <el-radio-group v-model="timeType">
            <el-radio-button label="1">春季典型日</el-radio-button>
            <el-radio-button label="2">夏季典型日</el-radio-button>
            <el-radio-button label="3">秋季典型日</el-radio-button>
            <el-radio-button label="4">冬季典型日</el-radio-button>
          </el-radio-group>
        </el-form-item>
     
      
      </el-form>

            
      <div style="margin-top: 0.8vh;text-align: right;margin-right: 1vh;">
        <el-button type="primary" @click="queryHeLoadPage()" >
          <span class="button-text">查询</span>
        </el-button>
      </div>

    </div>
  
    <div style="" class="box1">
      <div id="barCharts1" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box2">
      <div id="barCharts2" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>
  
    <div style="" class="box3">
      <div id="barCharts3" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box4">
      <div id="barCharts4" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>
    
    
  
  <!-- 上传弹窗 -->
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogShowFlag"  width="80vh" align="left">
      
      <div class="uploadModal">
        
        <div class="modal-body">
          
          <el-link style="color: #2e44ff;font-size: 1vw;" @click="downloadTemp()" class="modal-description">下载模版，填写信息</el-link>
          <button class="upload-area">
            <span class="upload-area-icon">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="340.531" height="419.116" viewBox="0 0 340.531 419.116">
                <g id="files-new" clip-path="url(#clip-files-new)">
                  <path id="Union_2" data-name="Union 2" d="M-2904.708-8.885A39.292,39.292,0,0,1-2944-48.177V-388.708A39.292,39.292,0,0,1-2904.708-428h209.558a13.1,13.1,0,0,1,9.3,3.8l78.584,78.584a13.1,13.1,0,0,1,3.8,9.3V-48.177a39.292,39.292,0,0,1-39.292,39.292Zm-13.1-379.823V-48.177a13.1,13.1,0,0,0,13.1,13.1h261.947a13.1,13.1,0,0,0,13.1-13.1V-323.221h-52.39a26.2,26.2,0,0,1-26.194-26.195v-52.39h-196.46A13.1,13.1,0,0,0-2917.805-388.708Zm146.5,241.621a14.269,14.269,0,0,1-7.883-12.758v-19.113h-68.841c-7.869,0-7.87-47.619,0-47.619h68.842v-18.8a14.271,14.271,0,0,1,7.882-12.758,14.239,14.239,0,0,1,14.925,1.354l57.019,42.764c.242.185.328.485.555.671a13.9,13.9,0,0,1,2.751,3.292,14.57,14.57,0,0,1,.984,1.454,14.114,14.114,0,0,1,1.411,5.987,14.006,14.006,0,0,1-1.411,5.973,14.653,14.653,0,0,1-.984,1.468,13.9,13.9,0,0,1-2.751,3.293c-.228.2-.313.485-.555.671l-57.019,42.764a14.26,14.26,0,0,1-8.558,2.847A14.326,14.326,0,0,1-2771.3-147.087Z" transform="translate(2944 428)" fill="var(--c-action-primary)"/>
                </g>
              </svg>
            </span>
            <span class="upload-area-title">请选择您要上传的文件，仅支持xls,xlsx格式文件</span>
            <span class="upload-area-description">
              <br/><strong @click="goFile()">点击上传</strong>
            </span>
          </button>
        </div>
        <form style="display: none;" enctype="multipart/form-data">
            <input type="file" id="file" name="file" ref="files" @change="importData($event)"
                accept=".xls,.xlsx" />
        </form>
        <div class="modal-footer">
          <!-- <el-button type="primary" @click="confirmUpload()">确认上传</el-button> -->
          <el-button type="primary" @click="closeWindow()">取消</el-button>
        </div>
      </div>

 
    </el-dialog>
  </div>
  <!-- 上传弹窗 -->


  </div>
  
</template>

<script>
import { registerTheme } from 'echarts';



  export default {
    name: 'heLoadPage',
    data() {
      return {
        dataType:"typicalDay",
        loadType:"hydrogenLoad",
        timeType:"1",
        dialogTitle : "上传负荷数据",
        dialogShowFlag : false,
        templateName : "loadTemplate.xlsx",
        uploadUrl : "/iepsapi/ea/hpEconomicAnalysis/importLoadPowerData",
        projectId : ""
      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.queryHeLoadPage();
    },
    methods: {
      
      queryHeLoadPage : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryHeLoadPage?projectId='+this.projectId+"&type=ew"+"&timeType="+this.timeType).then((res) => {
          
          var result = res.data;
           
          if(result){

            var hydrogenLoadData = result.hydrogenLoadData;
            var electricLoadData = result.electricLoadData;
            var heatLoadData = result.heatLoadData;
            var coolingLoadData = result.coolingLoadData;

            let barCharts1 = this.$echarts.init(document.getElementById('barCharts1'))
            let barCharts2 = this.$echarts.init(document.getElementById('barCharts2'))
            let barCharts3 = this.$echarts.init(document.getElementById('barCharts3'))
            let barCharts4 = this.$echarts.init(document.getElementById('barCharts4'))

            var barOption1 = this.getBarOption();
            var barOption2 = this.getBarOption();
            var barOption3 = this.getBarOption();
            var barOption4 = this.getBarOption();

            
            barOption1.series[0].areaStyle.color.colorStops[0].color = "#37D26D";
            barOption1.series[0].areaStyle.color.colorStops[1].color = "RGBA(55,210,109, 0)";

            barOption3.series[0].areaStyle.color.colorStops[0].color = "#FFD251";
            barOption3.series[0].areaStyle.color.colorStops[1].color = "RGBA(255,210,81, 0)";

            barOption4.series[0].areaStyle.color.colorStops[0].color = "#6475EA";
            barOption4.series[0].areaStyle.color.colorStops[1].color = "RGBA(100,117,234, 0)";

            if(hydrogenLoadData){
              barOption1.xAxis.data = hydrogenLoadData.xAxisData;
              barOption1.series[0].data = hydrogenLoadData.seriesData;
            }

            if(electricLoadData){
              barOption2.xAxis.data = electricLoadData.xAxisData;
              barOption2.series[0].data = electricLoadData.seriesData;
            }

            if(heatLoadData){
              barOption3.xAxis.data = heatLoadData.xAxisData;
              barOption3.series[0].data = heatLoadData.seriesData;
            }

            if(coolingLoadData){
              barOption4.xAxis.data = coolingLoadData.xAxisData;
              barOption4.series[0].data = coolingLoadData.seriesData;
            }
       

            barOption1.title.text = "氢负荷";
            barOption2.title.text = "电负荷";
            barOption3.title.text = "热负荷";
            barOption4.title.text = "冷负荷";

            barOption1.yAxis.name = "kg";
            barOption2.yAxis.name = "kW";
            barOption3.yAxis.name = "kW";
            barOption4.yAxis.name = "kW";


            barCharts1.clear(); 
            barCharts2.clear(); 
            barCharts3.clear(); 
            barCharts4.clear(); 

            barCharts1.setOption(barOption1); 
            barCharts2.setOption(barOption2); 
            barCharts3.setOption(barOption3); 
            barCharts4.setOption(barOption4); 

            window.onresize = function(){
              barCharts1.resize(); 
              barCharts2.resize(); 
              barCharts3.resize(); 
              barCharts4.resize(); 
            }



          }
        }).catch((error) => {
          console.log(error);
        });


      },


      
      uploadData : function(){
        this.dialogShowFlag = true;
      },

      closeWindow : function(){
        this.dialogShowFlag = false;
      },
      closeLineWindow : function(){
        this.lineShowFlag = false;
      },
      goFile() {
          this.$refs.files.click();
      },
      downloadTemp: function () { 

        var templateName = "";
        switch(this.loadType){
          case "hydrogenLoad":
            templateName = "hydrogenLoadTemplate.xlsx";
            break;
          case "electricLoad":
            templateName = "electricLoadTemplate.xlsx";
            break;
          case "heatLoad":
            templateName = "heatLoadTemplate.xlsx";
            break;
          case "coolingLoad":
            templateName = "coolingLoadTemplate.xlsx";
        }
 
          window.open('/iepsapi/ea/hpEconomicAnalysis/downloadTemp?templateName=' + templateName, '_self');
      },
      
      //导入
      importData: function (file) {
          var vm = this;
          var files = file.target.files[0];
          var fileName = files.name;
          if (!files) {
              return;
          }
          if (files.type === "application/vnd.ms-excel" || files.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
              var formData = new FormData();
              formData.append('file', file.target.files[0]);
              formData.append('fileName', fileName);
              formData.append('importType', vm.loadType);
              formData.append('id',"heLoadPage");
              formData.append('projectId', vm.projectId);
              const loading = this.$loading({
                  lock: true,
                  text: "正在导入...",
                  spinner: "hy-icon-loading",
                  background: "rgba(0, 0, 0, 0.7)",
              });
              $.ajax({
                  type: 'post',
                  url: vm.uploadUrl+"?timeParam="+new Date().getTime(),
                  data: formData,
                  cache: false,
                  processData: false,
                  contentType: false,
                  timeout: 300000, // 设置超时时间为300000毫秒（即5分钟） 
                  success: function (res) {
                      //成功执行的代码
                      loading.close();
                      var state = res.state;
                      if (state == 'error') {
                
                          vm.$message({
                            message: res.message,
                            type: 'info'
                          });
                      } else {
                  
                          vm.$message({
                            message: '导入成功',
                            type: 'success'
                          });
                          vm.dialogShowFlag = false;
                      }
                      setTimeout(() => {
                          vm.queryHeLoadPage();;
                      }, 1000);



                  },
                  error: function (xhr, textStatus, errorThrown) {
                      loading.close();
                      // 处理超时错误
                      if (textStatus == 'timeout') {
                          // 超时后的处理逻辑
                          vm.$message({
                            message: '后台导入中',
                            type: 'info'
                          });
                      } else {
                          vm.$message({
                            message: '导入失败',
                            type: 'error'
                          });
                      }
                  }
              })
          } else {
              this.$message({
                  message: '文件格式错误！',
                  type: 'error'
              });
              return;
          }
      },

      getBarOption:function(){
        
        var barOption = {
          //backgroundColor:'#00266b',
          color: ['#2e6373', '#0055F2', '#F27300'],
          title: {
            text: '',
            left: 'center', // 标题居中显示
            top:'2%',
            textStyle: {
              color: '#f2f2f2', // 标题字体颜色为黑色
              fontSize: 16, // 标题字体大小为24px
              fontWeight: 'bold', // 标题字体加粗
            },
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13, 64, 71, 0.50)',
            borderColor: 'rgba(143, 225, 252, 0.60)',
            padding: 8,
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '5%',
            right: '8%',
            top: '18%',
            bottom: '10%', 
          },
          legend: {
            show: false,
          },
          xAxis: {
            name: '(小时)', 
            nameTextStyle: {
              color: '#f2f2f2',
              padding: [0, -10, -5, 0]
            },
            type: 'category',
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
                show: true,
              textStyle: {
                color: '#fff', //更改坐标轴文字颜色
                
              },
          
            },
            data:   [
              "00:00",
              "02:00",
              "04:00",
              "06:00",
              "08:00",
              "10:00",
              "12:00",
              "14:00",
              "16:00",
              "18:00",
            ]
          },
          yAxis: {
            name: '',
            nameTextStyle: {
              fontSize: 14,
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff', //设置Y轴的颜色
                width: 1, //设置Y轴的粗细
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff', //Y轴的数据字体颜色
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#fff', //网格线的颜色
                width: 1.5, //X轴的粗细
              },
            },
          },
          series: [
            {
              name: '数据',
              type: 'line',
              smooth: true,
              // symbol: 'circle',
              symbol: "circle",
              symbolSize: 5,
              // lineStyle: {
              //   normal: {
              //     color: this.optionEcharts.color,
              //     shadowColor: "rgba(0, 0, 0, 0)",
              //     shadowBlur: 0,
              //     shadowOffsetY: 5,
              //     shadowOffsetX: 5,
              //   },
              // },
              label: {
                show: false,
                position: "top",
                textStyle: {
                  color: "rgba(1, 251, 246, 1)",
                  fontSize: 16,
                },
              },
              itemStyle: {
                color: "#fff",
                borderColor: '#47ade34f',
                borderWidth: 10,
                shadowColor:'#346a78',
                shadowBlur: 5,
                shadowOffsetY: 1,
                shadowOffsetX: 1,
                // color: '#fff',
                // borderColor: "rgba(255, 255, 255, .2)",
                // borderWidth: 10,
                // shadowColor: "rgba(0, 0, 0, 0)",
                // shadowBlur: 5,
                // shadowOffsetY: 1,
                // shadowOffsetX: 1,
              },
              // label: {
              //   show: false,
              //   position: 'right',
              //   color: '#fff',
              // },
              tooltip: { 
                trigger: "axis",
                show: true,
              },
              areaStyle: {
                opacity: 0.8,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#286994",
                    },
                    {
                      offset: 1,
                      color: "RGBA(0, 222, 242, 0)",
                    },
                  ],
                  global: false, // 缺省为 false
          
                },
      
              },
              
              emphasis: {
                focus: 'series',
              },
              data: []
            },
          ]
        };

        return barOption;

      }

    }
  }
</script>



<style>

.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 


/deep/ .el-radio-button__inner {
    white-space: nowrap;
    background: #3a4287;
    border: 1px solid #3f75f3;
    font-weight: 500;
    border-left: 0;
    color: #eaf1ff;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    position: relative;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 0;
}


  /* 设定地图的大小 */
  #allmap{
    height: 350px;
    width: 100%;
  }

  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{  
    width: 96.7%;
    height: 7%;
    position: absolute;
    left: 3vh;
    top: 11vh;
    margin: auto;
    border-radius: 5px;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


  .box1{  
    width: 48%;
    height: 30%;
    position: absolute;
    left: 3vh;
    top: 25vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 47.7%;
    height: 30%;
    position: absolute;
    left: 88vh;
    top: 25vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }
  
  .box3{ 
    width: 48%;
    height: 34%;
    position: absolute;
    left: 3vh;
    top: 51vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box4{ 
    width: 47.7%;
    height: 34%;
    position: absolute;
    left: 88vh;
    top: 51vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
